<template>
  <span>
    <span class="select-option">
      <!-- <el-select v-model="optionValue" placeholder="请选择">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select> -->
    </span>
    <!-- 提交后显示的答案框 -->
  <span class="submited-show wrong" v-if="isWorng">
                  <!-- 对错图标 -->
<!--      <i class="iconfont icon-dui"></i>-->
   <i class="iconfont icon-cuo"></i>
                  <span>{{optionValue}}</span>
                </span>
    <span class="submited-show right" v-if="isRight">
                  <!-- 对错图标 -->
          <i class="iconfont icon-dui"></i>
                  <span>{{optionValue}}</span>
                </span>
    <!-- 提交后显示答案 -->
    <span class="right" v-if="isShow">(答案：{{answer}})</span>
  </span>
</template>

<script>

export default {
  data () {
    return {
      optionValue: '',
      isRight: false,
      isWorng: false,
      isShow: false,
      answer: ""
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.submited-show {
  position: relative;
  display: inline-block;
  height:1.875rem;
  width: 6.25rem;
  border: 1px solid #eee;
  font-size: 1.125rem;
  vertical-align: middle;
  line-height: 1.875rem;
  padding-left: 1.75rem;
  .iconfont {
    position: absolute;
    left: 0.525rem;
    top: 0;
  }
}
.right {
  border-color: #13bfbf !important;
  color: #13bfbf;
  height: 1.875rem;
  line-height: 1.875rem;
}
.wrong {
  border-color: #ed1941 !important;
  color: #ed1941;
}
</style>
